<!--  -->
<template>
  <div class="common-layout">
    <el-container>
      <el-aside class="left">
        <div style=" margin-top=10%; "> <img src="../assets/images/logo.png" /></div>
      </el-aside>
      <el-main class="right">

        <el-form ref="registerFormRef" :model="registerForm" status-icon :rules="rules">
          <el-form-item>
            <h3 class="w">欢迎注册高校招生系统</h3>
          </el-form-item>
          <el-form-item label="用户名(账号)：" prop="nickName">
            <el-input v-model="registerForm.nickName" autocomplete="off" />
          </el-form-item>

          <el-form-item label="密    码：" prop="password">
            <el-input v-model="registerForm.password" show-password autocomplete="off" />
          </el-form-item>

          <el-form-item label="确认密码：" prop="rpassword">
            <el-input v-model="registerForm.rpassword" show-password autocomplete="off" />
          </el-form-item>

          <el-form-item label="邮箱" prop="email">
            <el-input placeholder="请输入邮箱" v-model="registerForm.email" autocomplete="off" />
          </el-form-item>
          <el-form-item label="性别" prop="sex">
            <el-radio-group v-model="registerForm.sex">
              <el-radio :label="'男'" size="large" border>男</el-radio>
              <el-radio :label="'女'" size="large" border>女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="电话" prop="teleNumber">
            <el-input placeholder="请输入电话" v-model="registerForm.teleNumber" autocomplete="off" />
          </el-form-item>
          <el-form-item>
            <el-button class="btn-1" type="primary" @click="submitForm(registerFormRef)">注册</el-button>
          </el-form-item>
          <el-from-item>
            <div class="toLogin">
              已有账号?<el-link @click="goLogin" type="primary">点此登录</el-link>
            </div>
          </el-from-item>
        </el-form>

      </el-main>
    </el-container>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, ref } from 'vue';
import { InitData } from '../types/register';
import { FormInstance, ElMessage } from 'element-plus';
import { register } from '../http/api';
import { useRouter } from 'vue-router';

export default defineComponent({
  setup() {
    const data = reactive(new InitData());
    const rpassword = ref('')
    const router = useRouter();
    var surePwd = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== data.registerForm.password) {
        callback(new Error('两次输入密码不一致!'));
        // console.log(value);
        // console.log(data.registerForm.password)
        
      } else {
        callback();
      }
    }
    const rules = {
      nickName: [
        { required: true, message: '请输入账号', trigger: 'blur' },
        { min: 4, max: 15, message: '账号长度需要介于4-15', trigger: 'blur' },
      ],

      password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, max: 18, message: '密码长度需要介于6-18', trigger: 'blur' },
      ],

      rpassword: [
        // { required: true, message: '请确认密码', trigger: 'blur' },
        { validator: surePwd, trigger: 'blur', required: true }
      ]
    };
    const submitForm = (registerFormRef: FormInstance | undefined) => {
      if (!registerFormRef) return;

      registerFormRef.validate((valid: boolean) => {
        if (valid) {

          register(data.registerForm)
            .then((res) => {
              // console.log(res);
              if (res.data.code == 200) {
                ElMessage.success({
                  message: '注册成功!正在返回登录页面!',
                  type: 'success',
                });
                router.push('/login');
              } else {
                ElMessage.warning({
                  message: res.data.msg,
                  type: 'warning',
                });
                return false;
              }
            })
            .catch((err) => {
              // console.log(err);
              ElMessage.warning({
                message: err,
                type: 'warning',
              });
            });
        }
      });
    };
    const goLogin = () => {
      router.push('/login');
    };

    return {
      ...toRefs(data),
      rules,
      submitForm,
      goLogin,
      rpassword
    };
  },
});
</script>

<style lang="scss" scoped>
.common-layout {
  width: 60%;
  margin: auto;
  margin-top: 5%;
  background-color: RGB(245, 240, 240);
  border: 1px solid grey;
  box-shadow: gray 5px 10px 30px 5px;
  border-radius: 20px;

  .left {
    width: 50%;
    font-size: 30px;
    text-shadow: gray 1px 2px 4px 1px;

    .w {
      margin-top: 30%;
      display: flex;
      text-align: center;
      justify-content: center;
    }
  }

  .btn-1 {
    width: 100%;
    margin-left: 20px;
    margin-right: 20px;
  }

  .toLogin {
    position: inherit;
    margin-left: 90px;
  }

  .right {
    width: 50%;

    .register-box {
      .registerForm {
        width: 400px;
        padding: 20px;
        background: white;
        border-radius: 20px;
        margin: 0 auto;
      }

      .register-title {
        text-align: center;
        margin-top: 20px;
        margin-bottom: 40px;
      }

      .btn {
        margin-top: 40px;
        margin-bottom: 40px;




      }
    }
  }
}
</style>
